<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>管理员登录</title>
		<!-- 引入layui的css文件 -->
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<!-- 引入自己的css -->
		<link rel="stylesheet" type="text/css" href="css/login.css"/>
	</head>
	<body>
		<form class="layui-form">
			<input type="hidden" name="token" />
			<h1>管理员登录</h1>
			<div class="layui-form-item">
				<label class="layui-form-label">账号</label>
				<div class="layui-input-inline">
					<input type="text" name="rootname" placeholder="请输入账号" 
					class="layui-input"/>
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">密码</label>
				<div class="layui-input-inline">
					<input type="password" name="password" placeholder="请输入密码" 
					class="layui-input"/>
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">验证码</label>
				<div class="layui-input-inline">
					<input type="text" name="vercode" placeholder="请输入验证码" 
					class="layui-input"/>
				</div>
				<div class="layui-form-mid layui-word-aux vercode">
					<img />
				</div>
				
			</div>
			<div class="layui-input-block">
			      <button class="layui-btn" lay-submit lay-filter="login">登录</button>
			    </div>
			
			
		</form>
		
		<!-- 引入layui的js文件 -->
		<script type="text/javascript" src="layui/layui.js"></script>
		<script src="js/cookie.js" type="text/javascript" charset="utf-8"></script>
		
		<!-- js -->
		<script type="text/javascript">
			layui.use(['layer', 'form'], function(){
				var layer = layui.layer;
				var form = layui.form;
				var $ = layui.jquery;
				
				//登录事件
				form.on('submit(login)', function(data){
					//使用ajax异步请求
					$.ajax({
						url:'http://127.0.0.1:9000/api/roots',
						type:'get',
						data:data.field,
						dataType:'json',
						success:function(data){
							if(data.status == 200){
								//获取到登录的token
								//如何保存这个token =>cookie
								setCookie('token', data.msg);
								
								
								//跳转主页
								window.location.href="index.html"
							}else{
								layer.msg(data.msg);
								updateVercode();
							}
						},
						error:function(){
							
						}
					});
					return false;	// 防止表单提交
				});
				
				updateVercode();
				
				$(".vercode img").click(function(){
					updateVercode();
				});
				
				//更新验证码
				function updateVercode(){
					/* 使用ajax请求验证码的信息 */
					$.ajax({
						url:'http://127.0.0.1:9000/vercode',
						type:'get',
						data:{},
						dataType:'json',
						success:function(data){
							if(data.status == 200){
								//成功获取了验证码信息
								var token = data.msg;
								$(".vercode img").attr('src', 'http://127.0.0.1:9000/vercode/'+token)
								$("input[name='token']").val(token);
							}
						},
						error:function(){
							
						}
					});
				}
				
				
				
			});
			
			
		</script>
		
	</body>
</html>
